<template>
    <div class="card">
        <div class="login">
            <div class="input">
                <div class="text">
                    <img src="@/assets/username.png" alt="" style="height:15px">
                    <input type="text" placeholder="用户名" v-model="data.username">
                </div>
                <div class="password">
                    <img src="@/assets/password.png" alt="" style="height:15px">
                    <input type="password" placeholder="密码" v-model="data.password">
                </div>
            </div>
            <div class="bottom">
                <button @click="login">
                    <img src="@/assets/right.png" alt="" style="height: 20px;">
                    <span></span><span></span>
                </button>
                <p>没有账号<a @click="register">注册</a></p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router';
import { reactive } from 'vue';
import {reqLog} from '../api'
const router = useRouter()
//存储用户信息
const data = reactive({
    username:'',
    password:''
})
//登录
const login = async ()=>{
    if(data.password && data.username){
        let result = await reqLog({username:data.username,password:data.password})
        if(result.data.status == 200){
            router.push('/')
        }else{
            alert(result.data.msg)
        }
    }
}
const register = ()=>{
    router.push('/register')
}
</script>

<style scoped lang="less">
.card {
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    height: 250px;
    width: 300px;
    background-color: #fff;
    .login {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        box-shadow: 12px 12px 10px 0 rgb(95,99,104);
    }

    .input {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        input {
            height: 30px;
            margin-top: 20px;
            margin-left:10px;
            padding-left: 15px;
            font-size: 12px;
            border: none;
            outline: none;
            border-bottom: 1px #ccc solid;
        }
        img{
            position: relative;
            top:10px;
        }
    }
    button {
        position: relative;
        width: 100px;
        height: 30px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: none;
        background-color: rgb(237,246,245);
        margin-bottom: 20px;

    }
    p {
        text-align: center;
        font-size: 10px;
        a {
            padding:4px;
            text-decoration: none;
            color: aqua;
        }
    }
    button span:nth-of-type(1){
        position: absolute;
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background-image: linear-gradient(to top,aqua ,transparent);
        animation: you 1s linear infinite;
        animation-delay: 0.25s;
    }
    @keyframes you{
        0%{
            top:-100%;
        }
        50%,100%{
            top:100%;
        }
    }
    button span:nth-of-type(2){
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background-image: linear-gradient(to bottom,aqua ,transparent);
        animation: zuo 1s linear infinite;
        animation-delay: 0.75s;
    }
    @keyframes zuo{
        0%{
            bottom:-100%;
        }
        50%,100%{
            bottom:100%;
        }
    }
}
</style>